<template>
	<div class="layout">
		<div class="container">
			<Header isBack></Header>
			<div class="personal">
				<div class="logo_img">
					<image class="personal_logo" src="../../static/img/personal_logo.png"></image>
				</div>
				<div class="list">
					<div class="list_item">
						<image class="item_img" src="../../static/img/personal/SETTING.svg" @click="goPage('setting')"></image>
					</div>
					<div class="list_item">
						<image class="item_img" src="../../static/img/personal/AGREEMENT.svg" @click="goPage('agreement')"></image>
					</div>
					<div class="list_item">
						<image class="item_img" src="../../static/img/personal/PRIVACY.svg" @click="goPage('privacy')"></image>
					</div>
					<div class="list_item">
						<image class="item_img" src="../../static/img/personal/EXIT.svg" @click="loginOut"></image>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
const goPage = (type) => {
	const urls = {
		setting: '/pages/account/index',
		agreement: '/pages/disclaimer/agreement',
		privacy: '/pages/disclaimer/disclaimer',
	};
	
	uni.navigateTo({
		url: urls[type]
	})
}

const loginOut = async () => {
	// const { data: res } = await apis.loginOut({ email: mail.value, captcha_code: code.value });
	uni.reLaunch({
		url: '/pages/login/login'
	});

	loginStore().setLogout();
}
</script>

<style lang="scss" scoped>
.layout {
	position: relative;
	background: url('../../static/img/bg-3.jpg') center no-repeat;
	background-size: cover;
	
	&::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.12+100 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
}

.container {
	position: relative;
	z-index: 9;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.logo_img {
	text-align: center;
	
	.personal_logo {
		width: 1000upx;
		height: 350upx;
		margin: 150upx 0 20upx;
	}
}

.personal {
	flex: 1;
}

.list {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.list_item {
		width: 1000upx;
		padding: 24upx 0;
		font-size: 0;
		text-align: center;
		border: 1px solid #A0865B;
		margin-top: 40upx;
		cursor: pointer;
		background: linear-gradient(90deg, rgba(78, 10, 10, 0.80) 0%, #712323 50%, rgba(78, 10, 10, 0.80) 100%);
	
		&:hover {
			border: 1px solid #A46D37;
			background: rgba(113, 35, 35, .8);
		}
	}
	
	.item_img {
		height: 42upx;
	}
}

@media (max-width: 1024px) {
	.contaier {
		justify-content: space-between;
		height: 100%;
	}
	
	.logo_img {
		
		.personal_logo {
			width: 600upx;
			height: 200upx;
			margin-top: 200upx;
		}
	}
	
	.personal {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	
	.list {
		padding-bottom: 200upx;
		
		.list_item {
			width: 600upx;
			padding: 16upx 0;
			font-size: 0;
			text-align: center;
			border: 1px solid #A0865B;
			margin-top: 20upx;
			background: linear-gradient(90deg, rgba(78, 10, 10, 0.80) 0%, #712323 50%, rgba(78, 10, 10, 0.80) 100%);
		
			&:hover {
				border: 1px solid #A46D37;
				background: rgba(113, 35, 35, .8);
			}
		}
		
		.item_img {
			width: 100%;
			height: 21upx;
			padding: 8upx 0;
		}
	}
}
</style>